<template>
    <div class="global-header">
        <div class="header-min">
            <div class="container row">
                <div class="iconfont icon-location row">
                    {{$store.state.home.city}}
                    
                    <el-dropdown trigger="click" @command="handleSwitchCity">
                      <span class="el-dropdown-link">
                        <span class="toggle-city">[切换城市]</span>
                      </span>
                      <el-dropdown-menu slot="dropdown" >
                        <el-dropdown-item 
                          v-for='(item, index) in $store.state.home.citylist' 
                          :key="index" 
                          :command="item"
                          icon="el-icon-plus">
                            {{item}}
                          </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                </div>
                
                <div class="details row">
                    <div class="node" v-if="!isLogin">
                        <i class="iconfont icon-desktop"></i>发布免费职位
                        <router-link to="/login/1">企业登陆</router-link>
                    </div>
                    <div class="node" v-if="!isLogin">
                        <i class="iconfont icon-user"></i>
                        <router-link to="/login/0">求职者登陆</router-link>
                        <router-link to="/register">求职者注册</router-link>
                    </div>
                    <template v-if="isLogin">
                      <el-popover placement="bottom" width="400" trigger="click">
                            <el-tabs v-model="activeName" :stretch="true">
                                <el-tab-pane label="通知" name="first">
                                  <div class="text-center" v-if="userMsgList.length == 0">暂无消息</div>
                                  <ul v-if="userMsgList.length !== 0">
                                    <li @click="handleaReadMsg(item)" v-for="(item, index) in userMsgList" :key="index">
                                      <div class="row" style="padding: 14px 0; cursor: pointer;">
                                        <div class="flex-grow-1">
                                          <div>{{item.content}}</div>
                                          <div style="font-size: 12px; color: #999; margin-top: 5px;">{{item.createTime}}</div>
                                        </div>
                                        <div>
                                          <el-tag v-if="item.isRead == '0'">未读</el-tag>
                                          <el-tag v-if="item.isRead == '1'" type="info">已读</el-tag>
                                        </div>
                                      </div>
                                        
                                      <hr/>
                                    </li>
                                  </ul>
                                  <div v-if="userMsgList.length !== 0" @click="handleClearMsg" style="height: 30px; text-align: center; line-height: 30px; cursor: pointer;">清空系统消息</div>
                                </el-tab-pane>
                                <el-tab-pane label="消息" name="second">
                                    <div><informAterList model="2"></informAterList></div>
                                </el-tab-pane>
                            </el-tabs>
                            <div slot="reference" class="inform row aic" style="margin-right: 24px;">
                                <el-badge :is-dot="
                                listEvaluateData.rows !== undefined 
                                && listEvaluateData.rows.length !== 0
                                && userMsgList.length !== 0 ? true :false
                                " 
                                :max="99">
                                    <div class="inform iconfont icon-bell"></div>
                                </el-badge>
                            </div>
                        </el-popover>
                    </template>
                   
                    <el-dropdown trigger="click" @command="userOperation">
                        <span class="el-dropdown-link">
                            <div class="user-login row" v-if="isLogin">
                                <img
                                    class="logo"
                                    :src="globalUserInfo 
                                    && globalUserInfo.jobSeeker 
                                    && BASEURL + globalUserInfo.jobSeeker.avatar 
                                    ? BASEURL + globalUserInfo.jobSeeker.avatar 
                                    :
                                    globalUserInfo.company && globalUserInfo.company.logo
                                    ?
                                    BASEURL + globalUserInfo.company.logo
                                    : 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'"
                                    alt=""
                                >
                                <div class="global-header-index-name">
                                    {{(globalUserInfo
                                    && globalUserInfo.jobSeeker
                                    && globalUserInfo.jobSeeker.name
                                    ?
                                    globalUserInfo.jobSeeker.name
                                    :
                                    globalUserInfo.company && globalUserInfo.company.name
                                    ?
                                    globalUserInfo.company.name
                                    :
                                    globalUserInfo.username )}}
                                </div>
                            </div>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
                            <el-dropdown-item v-if="globalUserInfo && globalUserInfo.roleId == '0'" command="resumeAbout">已投递简历</el-dropdown-item>
                            <el-dropdown-item v-if="globalUserInfo && globalUserInfo.roleId == '1'" command="resumeAbout">收到的简历</el-dropdown-item>
                            <el-dropdown-item command="loginOut" divided>退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div class="iphone row">
                        <i class="iconfont icon-phone"></i>400-885-9898
                    </div>
                </div>
            </div>
        </div>
        <div class="global"></div>
        <div class="container row nav">
            <div class="logo">
                <img
                    class="logo"
                    src="http://www.114dbzp.com/data/upload/resource/logo_home.jpg"
                    alt=""
                >
            </div>
            <div class="row global-search">
                <el-select
                    @change="changeSearchSelectVal"
                    class="search-select"
                    v-model="searchSelectValue"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
                <el-input
                    class="search-value"
                    @blur="blurSearchVal"
                    v-model="searchValue"
                    placeholder="请输入内容"
                ></el-input>
                <el-button plain class="handlebtn" @click="handleSearchBtn">搜索</el-button>
            </div>
            <el-menu
                :router="isrouter"
                :active-text-color="activeColor"
                :default-active="activeIndex"
                class="nav-main el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
            >
                <el-menu-item index="/">首页</el-menu-item>
                <el-menu-item index="/noun">网络招聘会</el-menu-item>
            </el-menu>
        </div>
    </div>
</template>
<script>
import { BASEURL } from "@/api/";
import sock from "@/common/socket";
import informAterList from '@/components/informAterList'

export default {
  data() {
    return {
      activeIndex: this.$route.path.length > 1 ? this.$route.path : "/",
      isrouter: true,
      activeName: "first",
      options: [
        {
          value: "0",
          label: "招聘会"
        },
        {
          value: "1",
          label: "职位"
        }
      ],
      userMsgList:[],
      searchSelectValue: this.$store.state.home.searchSelectValue,
      searchValue: this.$store.state.home.searchValue,
      activeColor: "#409EFF",
      BASEURL,
      listEvaluateData: {},
    };
  },
  watch: {
    $route: function() {
      let arr = ["/", "/noun"];
      if (this.$route.path.length > 1 && !arr.includes(this.$route.path)) {
        this.activeColor = "#909399";
      } else {
        this.activeIndex =
          this.$route.path.length > 1 ? this.$route.path.substr(1) : "/";
        this.activeColor = "#409EFF";
      }
    }
  },
  computed: {
    isLogin() {
      return this.$store.state.home.isLogin;
    },
    globalUserInfo() {
      return this.$store.state.home.globalUserInfo;
    }
  },
  mounted() {
    // setTimeout(()=>{
    //     this.activeIndex = null;
    // },3000)
    if(this.isLogin){
      this.informsubmit();
      this.informreturn();
    }
  },
  methods: {
    handleSelect(key, keyPath) {
    },

    listEvaluate(){
        sock.on('listInterviewHistory',(res)=>{
          this.listEvaluateData = res;
        })
      },

    changeSearchSelectVal(val) {
      this.$store.dispatch("changeSearchSelectVal", val);
    },
    blurSearchVal(e) {
      this.$store.dispatch("changeSearchVal", e.target.value);
    },
    handleSearchBtn() {
      console.log(
        this.$store.state.home.searchSelectValue,
        this.$store.state.home.searchValue
      );
      if(this.$store.state.home.searchValue.replace(/(^\s+)|(\s+$)/g,"").length == 0){
        this.$message.error('请填写搜索相关内容');
        return;
      }
      this.$router.push(`/search/${this.$store.state.home.searchSelectValue}/${this.$store.state.home.searchValue.replace(/(^\s+)|(\s+$)/g,"")}`);
    },
    userOperation(command) {
      command == "loginOut" && this.$store.dispatch("loginOut") && this.$router.push("/");
      command == "resumeAbout" && this.$router.push(`/receivedoracceptedresume`);
      command == "userInfo" && this.$router.push("/userInfo");
    },

    // 用户消息提交
    informsubmit() {
      sock.emit("getUserMsg", { userId: this.globalUserInfo.userId });
    },

    //用户消息返回
    informreturn() {
      sock.on("userMsg", res => {
        console.log(res);
        this.userMsgList = res;
      });
    },

    // 读消息
    handleaReadMsg(item){
      sock.emit('readMsg', {"msgId" : item.msgId, "userId": this.globalUserInfo.userId});
    },

    // 切换城市
    handleSwitchCity(item){
      localStorage.setItem('city', item);
      location.reload() 
    },

    //清空消息
    handleClearMsg(){
      sock.emit('clearUserMsg', {"userId": this.globalUserInfo.userId});
    },

  },
  components: {
    informAterList,
  }
};
</script>

<style lang="less">
.global-header {
  .container {
    width: 1200px;
    margin: 0 auto;
    .el-menu.el-menu--horizontal {
      border: 0;
    }
    .el-menu--horizontal > .el-menu-item.is-active {
      background: none;
      color: #409eff;
      border: none;
    }

    .el-menu--horizontal > .el-menu-item {
      border: none;
      font-size: 16px;
    }
  }
  .header-min {
    width: 100%;
    align-items: center;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    background: #f3f8ff;
    .iconfont {
      font-size: 13px;
      justify-content: flex-start;
      line-height: 1;
      flex: 1;
      align-items: center;
      .toggle-city {
        color: #409eff;
        margin-left: 10px;
        cursor: pointer;
      }
    }
    .details {
      font-size: 13px;
      .iconfont {
        margin-right: 5px;
      }
      .node {
        color: #409eff;
        line-height: 1;
        margin-right: 20px;
        .iconfont {
          font-size: 16px;
        }
        a {
          color: #409eff;
          margin-left: 5px;
          margin-right: 6px;
        }
      }
      .iphone {
        color: #6c6c6c;
        align-items: center;
      }
    }
  }
  .nav {
    align-items: center;
    padding: 10px 0;
    .logo {
      flex: 1;
      text-align: left;
    }
  }

  .user-login {
    align-items: center;
    margin-right: 20px;
    img {
      width: 24px;
      height: 24px;
      cursor: pointer;
    }

    .global-header-index-name {
      cursor: pointer;
      padding: 0 8px;
      display: inline-block;
      transition: all 0.3s;
      height: 100%;
      display: flex;
      align-items: center;
      color: #5f5f5f;
    }
  }

  .search-select {
    width: 150px;
    input {
      border: none;
    }
  }
  .global-search {
    input {
      border-top: 0;
      border-left: 0;
      border-right: 0;
      border-radius: 0;
    }

    .handlebtn {
      margin: 0 20px;
      padding: 0;
      border: none;
      margin-right: 18px;
    }
  }
  .inform {
    font-size: 20px !important;
    //   margin-right: 15px !important;
    cursor: pointer;
  }
}
</style>

